<template>
	<view class="home-banner component-diy" v-if="false">
		<swiper class='home-swiper' autoplay="true" interval="3000" duration="1000" circular="true"
			v-if="componentData.fileList && componentData.fileList.length > 0">
			<swiper-item v-for="(banner, index) in componentData.fileList" :key='index'>
				<image :src="banner.imageUrl" class="swiper-image" @click="toImgUrl(banner.page.url)" />
			</swiper-item>
		</swiper>
		<!-- #ifdef H5 -->
		<view v-else class="noSetting">
			轮播组件参数未设置
		</view>
		<!-- #endif -->
	</view>
	<view class="home-banner component-diy" :style="boxStyle" v-else>
		<template v-if="componentData.fileList && componentData.fileList.length > 0 && !reset">
			<view class="wrap">
				<swiper class="swiper" :vertical="vertical" :style="swiperStyle" :autoplay="autoplay"
					:interval="interval" :duration="duration" :circular='loop' @change='change'
					:previous-margin='previousMargin + "rpx"' :next-margin='nextMargin + "rpx"'>
					<swiper-item v-for="(item,index) in list" :key='index'>
						<view v-if="list && list.length>0" class="item"
							:class="[!crown ? '' : current==index ? 'crown-active':'crown']">
							<image @click="itemClick(item)" v-if="!slots" class="item-img"
								:class="[imgShadow?'imgShadow':'']" :src="item[imgKey]"
								:style="{ borderRadius: imgRadius + 'px',width:imgWidth+'%'}" mode="aspectFill"></image>
						</view>
					</swiper-item>
				</swiper>
				<view class="dots flex" :style="{bottom: bottom * 2 + 'rpx'}" v-if="dots">
					<view class="dot" :style="{backgroundColor:current == i ? dotActiveColor : dotColor}"
						:class="[current == i ? 'curr-dot' : '']" v-for="(d,i) in list" :key='i'>
					</view>
				</view>
			</view>
		</template>
		<!-- #ifdef H5 -->
		<view v-else class="noSetting">
			轮播组件参数未设置
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		props: ['componentData'],
		data() {
			return {
				// 轮播图片key
				imgKey: 'image',
				// 高度
				height: 282,
				// 图片圆角
				imgRadius: 4,
				// 图片阴影
				imgShadow: false,
				// 前边距
				previousMargin: 30,
				// 后边距
				nextMargin: 30,
				// 图片宽度
				imgWidth: 100,
				// 是否循环
				loop: true,
				// 自动播放
				autoplay: true,
				// 播放时间间隔
				interval: 2000,
				// 滑动速度
				duration: 1200,
				// 显示指示点
				dots: true,
				// 轮播点下边距
				bottom: 10,
				// 卡片特效
				crown: true,
				// 选中的下标
				current: 0,
				slots: false,
				dotColor: '#D6D6D6',
				dotActiveColor: "#fff",
				vertical: false,
				reset: false,
			}
		},
		created() {},
		computed: {
			boxStyle() {
				let css = {
					'margin': '0',
					'margin-top': this.componentData.marginTop + 'px', //上边距
					'margin-bottom': this.componentData.marginBottom + 'px', //下边距
					'padding-left': this.componentData.marginLR + 'px',
					'padding-right': this.componentData.marginLR + 'px',
				}
				return this.$joinStyle(css);
			},
			list() {
				return this.componentData.fileList.map((item) => {
					return {
						image: item['imageUrl'],
						item: item
					};
				})
			},
			swiperStyle() {
				let css = {
					height: this.height + 'rpx'
				}
				return this.$joinStyle(css);
			}
		},
		watch: {
			componentData: {
				immediate: true,
				handler() {
					if (this.componentData.fileList.length == 1) {
						// #ifdef H5
						// this.$nextTick(function() {
						// 	document.querySelector('.uni-swiper-slide-frame').style.transform = 'translate(0%) translateZ(0px)';
						// });
						// #endif
					}
					this.reset = true;
					this.$nextTick(() => {
						this.reset = false;
					});
					let c = this.componentData;
					if ('height' in c) {
						this.height = c.height;
					}
					if ('imgRadius' in c) {
						this.imgRadius = c.imgRadius;
					}
					if ('imgShadow' in c) {
						this.imgShadow = c.imgShadow;
					}
					if ('previousMargin' in c) {
						this.previousMargin = c.previousMargin;
					}
					if ('nextMargin' in c) {
						this.nextMargin = c.nextMargin;
					}
					if ('loop' in c) {
						this.loop = c.loop;
					}
					if ('autoplay' in c) {
						this.autoplay = c.autoplay;
					}
					if ('interval' in c) {
						this.interval = c.interval;
					}
					if ('duration' in c) {
						this.duration = c.duration;
					}
					if ('dots' in c) {
						this.dots = c.dots;
					}
					if ('bottom' in c) {
						this.bottom = c.bottom;
					}
					if ('crown' in c) {
						this.crown = c.crown;
					}
					if ('imgWidth' in c) {
						this.imgWidth = c.imgWidth;
					}
					if ('dotColor' in c) {
						this.dotColor = c.dotColor;
					}
					if ('dotActiveColor' in c) {
						this.dotActiveColor = c.dotActiveColor;
					}
					if ('vertical' in c) {
						this.vertical = c.vertical;
					}
				},
				deep: true
			},
		},
		methods: {
			toImgUrl: function(url) {
				if (url) {
					uni.navigateTo({
						url: url
					})
				}
			},
			itemClick(item) {
				try {
					this.toImgUrl(item.item.page.url);
				} catch (e) {
					//TODO handle the exception
				}
			},
			change(event) {
				let current = event.detail.current
				this.current = current;
			}
		}
	}
</script>

<style lang="less" scoped>
	.home-banner {
		position: relative;
		width: 100%;
		padding: 0;
		box-sizing: border-box;

		.home-swiper {
			width: 100%;
			/* #ifdef H5 */
			height: 141px;
			/* #endif */
			/* #ifndef H5 */
			height: 282rpx;
			/* #endif */
			box-sizing: border-box;

			.swiper-image {
				display: block;
				width: 100%;
				height: 100%;
			}
		}

		.noSetting {
			width: 100%;
			height: 141px;
			background-color: #d9d9d9;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 22px;
			color: #333;
		}
	}

	.wrap {
		position: relative;

		.crown {
			transform: scale(0.93, 0.85);
		}

		.item {
			height: 100%;
			transition: 1.2s;
		}

		.item-img {
			width: 100%;
			height: 100%;
		}

		.imgShadow {
			height: calc(100% - 10px);
			margin-bottom: 10px;
			box-shadow: 0 6px 6px rgba(0, 0, 0, .15);
		}

		.crown-active {
			transform: scale(1);
		}

		.dots {
			display: flex;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);

			.dot {
				width: 6rpx;
				height: 6rpx;
				border-radius: 50%;
				background-color: #D6D6D6;
				margin-right: 8rpx;
			}

			.curr-dot {
				height: 6rpx;
				width: 22rpx;
				border-radius: 6rpx;
				background-color: #fff;
			}
		}
	}
</style>
